ThreeJS – 设置透明背景模仿L2Dwidget.js看板娘渲染效果
1 ThreeJS设置透明背景 ThreeJS可以模仿L2Dwidget.js看板娘的那种效果，我们可以渲染一个模型，然后将背景设置为透明，然后播放模型动画。 首先我们需要将场景的背景颜色设置为null或者不设置场景颜色， scene.background = null; 然后将渲染器的alpha设…
- ThreeJS
- 2022-09-27
ThreeJS – 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题
1 3D模型在场景中部分或者全部不可见的问题描述 最近使用three.js在场景中显示gltf模型时候，当我使用THREE.OrbitControls操作摄像机想近距离观察gltf模型的时候发现一部分模型消失了，比如说假如这个模型是一匹马，当我远距离观察时可以完整的看到整匹马，但是当我想拉近摄像头近…
- ThreeJS
- 2022-09-24
ThreeJS – 如何提升three.js的渲染效果？看完这篇你可能会有启发
相信很多使用three.js在web端进行场景渲染的朋友们一定会有和我一样的疑问。在Unity，UE4中渲染效果那么好的模型和场景放到three.js中为什么那么丑？ 我在有一段时间也曾经被这个问题困扰过，虽然浏览内核利用GPU可能没有直接在系统层利用GPU的性能来的那么澎湃，但是总不至于同一个模型…
- ThreeJS
- 2022-09-22
ThreeJS – 摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度
1 ThreeJS摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度 在threejs中，如果我们想要摄像机绕某一个世界坐标轴旋转，比如绕Y轴旋转。我尝试过以下的方法 camera.rotateY(radian) camera.rotateOnWorldAxis(new THREE.Vector3(0,1,0…
- ThreeJS
- 2022-09-21
ThreeJS – FBXLoader: TGA loader not found, creating placeholder texture for …
1 Three.js出现FBXLoader: TGA loader not found, creating placeholder texture for...错误 最近将之前项目中基于three.js r101版本的项目进行了升级，将three.js的版本升级为r144，在加载fbx模型的部分代码…
- ThreeJS
- 2022-09-16
ThreeJS – 使用自定义Shader
1 前言 在three.js已经预置了很多材质，比如MeshStandardMaterial、MeshPhongMaterial、MeshLambertMaterial等等，这些预置的材质其实在内部使用了Shader已经为我们创建了固定的渲染管线，我们可以直接使用而不用再去重新编写Shader重新实…
- ThreeJS
- 2022-09-13
ThreeJS – 使用Hdr环境贴图作为间接光照对模型进行渲染
1 环境贴图 环境贴图（Environment Map）看起来像是从场景中对象的角度拍摄的环境全景照片，水平方向覆盖360度，垂直方向覆盖180度或360度。环境贴图的作用类似于对象周围一般照明环境的描述，通常用于以低成本渲染反射或者处理间接光照。 2 HDR HDR（High Dynamic Ra…
- ThreeJS
- 2022-09-08
ThreeJS – 获取当前使用的three.js的版本
1 获取当前使用的three.js的版本 我们可以使用 THREE.REVISION 输出当前项目中所使用的three.js的版本，在three.js中使用REVISION而不是VERSION表示版本。 我们可以写一段代码在控制台输出three.js的版本号，在本次测试中我们使用的是three.js…
- ThreeJS
- 2022-09-08
WebGL/ThreeJS – 相关文档、教程网站
1 WebGL 文档 https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API 教程 https://webglfundamentals.org/webgl/lessons/zh_cn/ 2 ThreeJS Github https://g…
- WebGL
- 2022-09-07
ThreeJS – 直接设置Fbx模型的某个关节的位移和旋转值
1 在ThreeJS中直接设置Fbx模型的某个关节的位移和旋转值 示例代码如下： fbxModel.traverse(function (child) { // 如果子节点为骨骼 if(child.isBone) { boneNum +=1; if(child instanceof THREE.Bo…
- ThreeJS
- 2021-05-14
ThreeJS – three.moudle.js报Uncaught SyntaxError：Unexpected token ‘export‘错误
1 Uncaught SyntaxError：Unexpected token 'export' 在script语句块中引入threejs总是在浏览器的console中出现错误： three.moudle.js报Uncaught SyntaxError：Unexpected token 'expor…
- ThreeJS
- 2021-05-08
ThreeJS – 动态更换fbx模型的某个子Mesh现有的纹理贴图为指定的纹理贴图
1 动态更换fbx模型的指定纹理贴图 在使用ThreeJS中的FBXLoader的过程中，我们在有的时候只需要Fbx模型的网格信息，而每个网格的纹理我们想自己动态的指定，这在OpenGL中很简单，在ThreeJS同样也是非常简单。 动态更换子mesh中纹理贴图可参考以下代码： var fbxMode…
- ThreeJS
- 2021-01-28